<template>
  <div class="linkadd">
    <NavbarIndex msg="Welcome to Your Vue.js App" />
    <b-container>
      <div style="max-width: 500px;margin:auto">
        <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px">
          <el-form-item label="所属分类：" prop="type_id">
            <el-select v-model="ruleForm.type_id">
              <el-option v-for="item in this.getByModuleName('link')" :key="item.id" :label="item.title" :value="item.id"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="网站名称：" prop="title">
            <el-input v-model="ruleForm.title"></el-input>
          </el-form-item>
          <el-form-item label="网站地址：" prop="url">
            <el-input v-model="ruleForm.url"></el-input>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="submitForm('ruleForm')">提交</el-button>
            <el-button @click="resetForm('ruleForm')">重置</el-button>
          </el-form-item>
        </el-form>
      </div>

    </b-container>
    <Footer msg="Welcome to Your Vue.js App" />
  </div>
</template>

<script>
// @ is an alias to /src
import Vue from "vue";
import Footer from "@/components/Footer.vue";
import NavbarIndex from "@/components/NavbarIndex.vue";
import { mapActions, mapGetters } from 'vuex'
import {
  Input,
  InputNumber,
  Radio,
  RadioGroup,
  Button,
  Select,
  Option,
  Form,
  FormItem,
  Message
} from "element-ui";
Vue.use(Input);
Vue.use(InputNumber);
Vue.use(Radio);
Vue.use(RadioGroup);
Vue.use(Button);
Vue.use(Select);
Vue.use(Option);
Vue.use(Form);
Vue.use(FormItem);

Vue.prototype.$message = Message;
export default {
  name: "linkadd",
  components: {
    NavbarIndex,
    Footer
  },
  data () {
    return {
      ruleForm: {
        title: "",
        url: "",
        type_id: 54,
      },
      rules: {
        title: [
          { required: true, message: '请填写网站名称', trigger: 'blur' },
        ],
        url: [
          { required: true, message: "请填写网网址", trigger: "blur" }
        ]
      },
      types: []
    }
  },
  created () {
    this['type/setList']()
    console.log(this.getByModuleName('link'))
  },
  computed: {
    ...mapGetters('type', ['getByModuleName'])
  },
  methods: {
    submitForm (formName) {
      this.$refs[formName].validate(valid => {
        if (valid) {
          let url = process.env.VUE_APP_prayerAdd_url;
          window.axios.post(url, this.ruleForm).then(ret => {
            if (ret.code == 0) {
              let _this = this
              this.clearData()
              this.$message({
                message: '祈祷成功',
                onClose: function () {
                  _this.$router.push('/prayer')
                }
              });
            } else {
              this.$message('数据写入错误')
            }

          });
        } else {
          return false;
        }
      });
    },
    resetForm (formName) {
      this.$refs[formName].resetFields();
    },
    ...mapActions(['type/setList'])
  }
};
</script>

<style scoped>
</style>

